<template>
  <!-- 评论区组件 -->
  <div class="comment-section">
    <h3>评论区</h3>
    <!-- 无评论时显示提示 -->
    <div v-if="comments.length === 0" class="no-comment">暂无评论</div>
    <!-- 遍历并渲染评论列表 -->
    <div v-for="comment in comments" :key="comment.id" class="comment-item">
      <div class="comment-author">{{ comment.author }}</div>
      <div class="comment-content">{{ comment.content }}</div>
    </div>
    <!-- 新增评论输入框和按钮 -->
    <div class="add-comment">
      <input v-model="newComment" placeholder="写下你的评论..." @keyup.enter="addComment" />
      <button @click="addComment">发表评论</button>
    </div>
  </div>
</template>

<script setup>
// 引入 Vue 的 Composition API
import { ref, computed } from 'vue'
// 引入 Pinia 博客 store
import { useBlogStore } from '../stores/blog'
// 接收父组件传入的文章 id
const props = defineProps({
  articleId: Number
})
// 获取博客 store 实例
const blog = useBlogStore()
// 新评论内容
const newComment = ref('')
// 当前文章的评论列表，响应式获取
const comments = computed(() => blog.getCommentsByArticleId(props.articleId))
// 新增评论方法
function addComment() {
  if (!newComment.value.trim()) return
  // 调用 store 方法新增评论
  blog.addComment(props.articleId, { author: '游客', content: newComment.value })
  newComment.value = ''
}
</script>

<style scoped>
/* 评论区样式 */
.comment-section {
  margin-top: 32px;
}
.no-comment {
  color: #aaa;
  margin-bottom: 12px;
}
.comment-item {
  background: #f6f8fa;
  border-radius: 6px;
  padding: 10px 16px;
  margin-bottom: 10px;
}
.comment-author {
  font-weight: bold;
  color: #409eff;
}
.comment-content {
  margin-top: 4px;
  color: #333;
}
.add-comment {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.add-comment input {
  flex: 1;
}
</style> 